<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		a{
			text-decoration: none;
		}
		body{
			font-family: "微软雅黑" Arial;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			background-color: #fff2e3;
		}
		.g-hd{
			margin-top: 40px;
		}
		.g-hd h1{
			font-size: 42px;
			color: #87968e;
		}
		.g-hd p{
			margin-top: 27px;
			color: #d5c4b0;
		}
		.tab li{
			display: inline-block;
			margin-top: 35px;
			margin-left: 10px;
		}
		.tab li .m-btn{
			padding: 5px 10px;
			background-color: #72b890;
			border-radius: 3px 3px;
			text-decoration: none;
			color: #fff;
		}
		.tab li .col{
			background-color: #aacfb1;
		}
		.tab li .m-btn:hover{
			background-color: #aacfb1;
		}
		.g-bd{
			margin-top: 30px;
		}
		.g-ft{
			margin-top: 30px;
			color: #87968e;
		}
		.g-ft a{
			color: #72b890;
			margin-left: 3px;
		}
	</style>
</head>
<body>
	<div class="g-hd">
		<h1>我的项目</h1>
		<p>一句话介绍自己</p>
		<ul class="tab">
			<li><a class="m-btn col" href="#">项目1</a></li>
			<li><a class="m-btn" href="#">项目2</a></li>
			<li><a class="m-btn" href="#">项目3</a></li>
			<li><a class="m-btn" href="#">项目4</a></li>
			<li><a class="m-btn" href="#">项目5</a></li>
		</ul>
	</div>
	<div class="g-bd">
		<img src="http://7xpvnv.com2.z0.glb.qiniucdn.com/65d4aba2-a097-4b24-aaa0-ebbaf7eedab2" alt="我的头像">
	</div>
	<div>
		<ul class="tab m-list">
			<li><a class="m-btn" href="#">查看源码</a></li>
			<li><a class="m-btn" href="#">使用说明</a></li>
		</ul>
	</div>
	<div class="g-ft">
		作者:<a href="#">我</a>
	</div>
</body>
</html>

